<!DOCTYPE html>
<html >
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>loading</title>
  <style>
    *{
      margin: 0;
      padding: 0;

    }
    body{
      height: 100vh;
      display: flex;
      justify-content: center;
      align-items: center;
      background-color: #000;
    }
    .wavy{
      position: relative;
      /* 倒影效果 */
      -webkit-box-reflect: below -12px linear-gradient(transparent,rgba(0,0,0,0.2));
    }
    .wavy span{
      position: relative;
      color: #fff;
      font-size: 50px;
      text-transform: uppercase;
      /* 行内元素要转换成行内块，或块级元素才能使用动画改变大小 */
      display: inline-block;
      letter-spacing: 8px;
      /**
      *linear：匀速
      *ease：相对于匀速，中间快，两头慢
      *ease-in：相对于匀速，开始的时候慢，之后快
      *ease-out：相对于匀速，开始时快，结束时候间慢，
      *ease-in-out：相对于匀速，（开始和结束都慢）两头慢
      *infinite：无限次播放
      **/
      animation: wavyAnimate 1s ease-in-out infinite;
      animation-delay: calc(0.1s * var(--i));
    }
    @keyframes wavyAnimate{
      0%{
        transform: translateY(0);
      }
      20%{
        transform: translateY(-20px);
      }
      40%,100%{
        transform: translateY(0);
      }
    }
  </style>
</head>
<body>
  <div class="wavy">
    <!-- --i是自定义属性 通过var函数调用 -->
    <span style="--i:1">l</span>
    <span style="--i:2">o</span>
    <span style="--i:3">a</span>
    <span style="--i:4">d</span>
    <span style="--i:5">i</span>
    <span style="--i:6">n</span>
    <span style="--i:7">g</span>
    <span style="--i:8">.</span>
    <span style="--i:9">.</span>
    <span style="--i:10">.</span>
  </div>
</body>
</html>